<!-- 表单 -->
<template>
	<view class="container">
		<view class="list">
			<view class="list-item right-icon">
				<text class="label">品牌：</text>
				<input class="input" type="text" value="" placeholder="请选择品牌" placeholder-style="color: #999;" />
			</view>
			<view class="list-item">
				<text class="label">农药登记号：</text>
				<input class="input" type="text" value="" placeholder="请输入农药登记证号" placeholder-style="color: #999;" />
			</view>
			<view class="list-item">
				<text class="label">ERP编码：</text>
				<input class="input" type="text" value="" placeholder="请输入ERP编码" placeholder-style="color: #999;" />
			</view>
			<view class="list-item">
				<text class="label">农药名称：</text>
				<input class="input" type="text" value="" placeholder="请输入农药名称" placeholder-style="color: #999;" />
			</view>
			<view class="list-item">
				<text class="label">生产企业：</text>
				<input class="input" type="text" value="" placeholder="请输入生产企业" placeholder-style="color: #999;" />
			</view>
			<view class="list-item right-icon">
				<text class="label">产品剂型：</text>
				<input class="input" type="text" value="" placeholder="请选择产品剂型" placeholder-style="color: #999;" />
			</view>
			<view class="list-item right-icon">
				<text class="label">毒性：</text>
				<input class="input" type="text" value="" placeholder="请选择毒性" placeholder-style="color: #999;" />
			</view>
			<view class="list-item right-icon">
				<text class="label">防治对象：</text>
				<input class="input" type="text" value="" placeholder="请选择防治对象" placeholder-style="color: #999;" />
			</view>
			<view class="list-item">
				<text class="label require">有效成分总含量：</text>
				<input class="input" type="text" value="" placeholder="请输入有效成分总含量" placeholder-style="color: #999;" />
				<text class="unit">%</text>
			</view>
		</view>
		<view class="tips">
			<text class="icon">!</text>
			<text class="text">请准确填写属性，有利于商品在搜索和推荐中曝光</text>
		</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
	.container {
		padding: 25rpx 25rpx 0;
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		padding-left: 30rpx;

		&-item {
			position: relative;
			display: flex;
			align-items: center;
			height: 100rpx;
			padding-right: 40rpx;
			border-bottom: 1rpx solid #F3F3F3;

			&:last-child {
				border-bottom-width: 0;
			}
			
			&.right-icon::after {
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
				font-family: 'iconfont';
				content: '\e61a';
				font-size: 28rpx;
				color: #222222;
			}

			.label {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #222222;
				
				&.require::before {
					content: '*';
					color: #FE3333;
				}
			}

			.input {
				flex-grow: 1;
				font-size: 28rpx;
				color: #222222;
			}

			.unit {
				position: relative;
				flex-shrink: 0;
				font-size: 28rpx;
				color: #999;
				padding-left: 22rpx;
				
				&::before {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					width: 1rpx;
					height: 28rpx;
					display: block;
					content: '';
					background-color: #999;
				}
			}

		}
	}

	.tips {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		
		.icon {
			width: 30rpx;
			height: 30rpx;
			font-size: 24rpx;
			color: white;
			text-align: center;
			line-height: 30rpx;
			background-color: #D8D8D8;
			border-radius: 50%;
			margin: 0 10rpx 0 12rpx;
		}
		
		.text {
			font-size: 26rpx;
			color: #999999;
		}
	}
</style>